<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/common-header-nav-copy.css}" rel="stylesheet">
    <link th:href="@{/css/icon/bootstrap-icon.css}" rel="stylesheet">
</head>
<body>
<div class="row" style="height: 100%">
    <nav class="nav-fragment col-2 nav-sm" th:fragment="nav_common">
        <div class="nav-list">
            <div class="user-info">
                <img class="user-img" src="/img/fighting.svg">
                <span class="user-id" th:text="'用户：' + ${session.user.getUserId}"></span>
            </div>
            <ul class="nav-items">
                <li class="item">
<!--                    好友-->
                    <ul class="item-options">
                        <li class="item-option option-cursor hidden-btn">
                            <a href="javascript:;" class="text-link option-cursor">
                                <i class="bi bi-person-hearts icon-margin"></i>
                                好友
                                <i class="bi bi-caret-left icon-right"></i>
                                <i class="bi bi-caret-down icon-right"></i>
                            </a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a th:href="@{/userIndex}" class="text-link option-cursor change-color">通讯录</a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a href="javascript:;" class="text-link option-cursor change-color">管理选项</a>
                        </li>
                    </ul>

<!--                    物流信息-->
                    <ul class="item-options">
                        <li class="item-option option-cursor hidden-btn">
                            <a href="javascript:;" class="text-link option-cursor">
                                <i class="bi bi-truck icon-margin"></i>
                                物流信息
                                <i class="bi bi-caret-left icon-right"></i>
                                <i class="bi bi-caret-down icon-right"></i>
                            </a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a th:href="@{/userIndex/boughtGoods}" class="text-link option-cursor change-color bought-goods">未到货</a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a href="javascript:;" class="text-link option-cursor change-color">管理选项</a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a href="javascript:;" class="text-link option-cursor change-color">管理选项</a>
                        </li>
                    </ul>

<!--                    购物车-->
                    <ul class="item-options">
                        <li class="item-option option-cursor hidden-btn">
                            <a th:href="@{/userIndex/shoppingCart}" class="text-link option-cursor shopping-cart">
                                <i class="bi bi-cart-dash icon-margin color-im"></i>
                                购物车
                                <i class="bi bi-caret-left icon-right color-im"></i>
                                <i class="bi bi-caret-down icon-right color-im"></i>
                            </a>
                        </li>
<!--                        <li class="item-option option-cursor lose-hidden">-->
<!--                            <a href="javascript:;" class="text-link option-cursor change-color">管理选项</a>-->
<!--                        </li>-->
<!--                        <li class="item-option option-cursor lose-hidden">-->
<!--                            <a href="javascript:;" class="text-link option-cursor change-color">管理选项</a>-->
<!--                        </li>-->
<!--                        <li class="item-option option-cursor lose-hidden">-->
<!--                            <a href="javascript:;" class="text-link option-cursor change-color">管理选项</a>-->
<!--                        </li>-->
                    </ul>

<!--                    历史浏览-->
                    <ul class="item-options">
                        <li class="item-option option-cursor hidden-btn">
                            <a href="javascript:;" class="text-link option-cursor">
                                <i class="bi bi-clock-history icon-margin"></i>
                                历史浏览
                                <i class="bi bi-caret-left icon-right"></i>
                                <i class="bi bi-caret-down icon-right"></i>
                            </a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a href="javascript:;" class="text-link option-cursor change-color">管理选项</a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a href="javascript:;" class="text-link option-cursor change-color">管理选项</a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a href="javascript:;" class="text-link option-cursor change-color">管理选项</a>
                        </li>
                    </ul>

<!--                    工具-->
                    <ul class="item-options">
                        <li class="item-option option-cursor hidden-btn">
                            <a href="javascript:;" class="text-link option-cursor">
                                <i class="bi bi-hammer icon-margin"></i>
                                工具
                                <i class="bi bi-caret-left icon-right"></i>
                                <i class="bi bi-caret-down icon-right"></i>
                            </a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a th:href="@{/plan}" class="text-link option-cursor change-color plan">我的计划</a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a href="javascript:;" class="text-link option-cursor change-color">页面风格</a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a href="http://aixt.hanhais.com" class="text-link option-cursor change-color">象棋</a>
                        </li>
                    </ul>

<!--                    设置-->
                    <ul class="item-options">
                        <li class="item-option option-cursor hidden-btn">
                            <a href="javascript:;" class="text-link option-cursor">
                                <i class="bi bi-gear icon-margin"></i>
                                设置
                                <i class="bi bi-caret-left icon-right"></i>
                                <i class="bi bi-caret-down icon-right"></i>
                            </a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a th:href="@{/userIndex/information}" class="text-link option-cursor change-color user-information">基本信息</a>
                        </li>
                        <li class="item-option option-cursor lose-hidden">
                            <a th:href="@{/userIndex/accountInformation}" class="text-link option-cursor change-color account-information">账号设置</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>



<script src="/js/jQuery.js"></script>
<script src="/js/common/nav.js"></script>
</body>
</html>